
 <template>
 	<view class="share">
 		<!-- 导航栏 -->
 		<!-- <navBar title="生成海报" color="#fff" background="transparent" isBack backColor="#fff"></navBar> -->
 		<nav-bars  bgColor="transparent" fontColor="#fff" title="生成海报"></nav-bars>
 		<!-- 背景 -->
 		<view class="s_bg"></view>
 		
 		<!-- 内容 -->
 		<view class="s_content">
 			<view class="s_cPicture">
 				<view class="s_cImage"><image :src="datas.back_img || 'https://cos.ryz1620.com/liankun/static/IMG279.png'"></image></view>
 				<view class="s_cUser">
 					<view class="s_cHead"><image :src="datas.store_logo || 'https://cos.ryz1620.com/liankun/static/IMG280.png'"></image></view>
 					<view class="s_cName">{{datas.store_name ||'***'}}</view>
 				</view>
 				<view class="s_cTags">
 					<view class="s_ctTag">
 						<view class="s_ctIcon"><image src="/static/common/icon_topic.png"></image></view>
 						<text>{{cate}}</text>
 					</view>
 				</view>
 				<view class="s_cText1 omit-1">{{datas.store_detail}}</view>
 				<view class="s_cBtm">
 					<view class="s_cCode"><image :src="datas.code"></image></view>
 					<view class="s_cTip">
 						<view>长按小程序码</view>
 						<view>查看Ta的分享</view>
 					</view>
 					<view class="s_cLogo">融易装</view>
 				</view>
 			</view>
 			<view class="s_cFuns">
 				<view class="s_cfClose" @tap="goBack">
 					<view class="s_cfBtn"><view class="s_cfIcon iconfont icon-cancel2"></view></view>
 					<view class="s_cfTxt">取消</view>
 				</view>
 				<view class="s_cfSave" @tap="download">
 					<view class="s_cfBtn"><view class="s_cfIcon iconfont icon-save"></view></view>
 					<view class="s_cfTxt">保存到相册</view>
 				</view>
 			</view>
 		</view>
 		
 		<!-- canvas -->
 		<view class="s_canvas">
 			<view class="s_cCan">
 				<canvas canvas-id="myPoster" :style="{'width': canvasWidth + 'px', 'height': canvasHeight + 'px'}"></canvas>
 			</view>
 		</view>
 	</view>
 </template>
 
 <script>
 // import service_design from '@/service/design'
 export default {
 	data() {
 		return {
 			systemInfo: null,
 			// canvas
 			canvasCtx: null,
 			canvasWidth: 640,
 			canvasHeight: 888,
 			trend_id :"",
 			datas:"",
 			img:'',
			cate:'',
 			titimg:'https://cos.ryz1620.com/liankun/static/IMG8650.png'
 		}
 	},
 	
 	onLoad(params) {
 		this.trend_id = params.trendId
 		// this.getshare()
		this.getShopIndex()
 	},
 	onReady() {
 		let _this = this
 		
 		if (!_this.canvasCtx) _this.canvasCtx = uni.createCanvasContext('myPoster')
 		if (!_this.systemInfo) {
 			uni.getSystemInfo({
 				success(res) {
 					_this.systemInfo = res
 				}
 			})
 		}
 	},
 	
 	methods: {
 		// 分享
 		// getshare() {
 		// 	let that = this
 		// 	service_design.getshareTrend({ trend_id :this.trend_id })
 		// 		.then(res => {	
 		// 			if(res.code == 1){
 		// 				this.datas =res.data
 		// 				this.avatar = res.data.user_id.avatar.path
 		// 				console.log(res.data,"asdasdasd");
 		// 				if(res.data.type == 1){
 		// 					console.log(123);
 					
 		// 					this.img = res.data.media[0].cover
 							
 		// 				}else{
 		// 					console.log(456);
 		// 					if(res.data.media.length>0){
 		// 						console.log(78);
 		// 						this.img = res.data.media[0].path
 		// 					}else{
 		// 						console.log(99);
 		// 						this.img = res.data.media.path
 		// 					}
 		// 				}
 		// 			}
 					
 		// 	})
 		// },
		// 获取主页信息
		getShopIndex(){
			uni.showLoading({
				title:'加载中...'
			})
			let sid = this.$store.state.index.sid
			let params = {
				store_id:sid
			}
			this.$api.store_storeDetail(params).then(res=>{
				console.log(res,'主页信息')
				if(res.code==1){
					this.datas = res.data
					let arr  = []
					if(res.data.cate_lst){
						if(Array.isArray(res.data.cate_lst)){
							res.data.cate_lst.map(item=>{
								arr.push(item.cate_name)
							})
						}else{
							arr.push(res.data.cate_lst.cate_name)
						}
					}
					this.cate = arr.join(',')
					uni.hideLoading()
				}
				// this.selectValue = res.data.is_carry==1?'是':'否'
			})
		},
		
 		// 返回
 		goBack() {
 			uni.navigateBack()
 		},
 		
 		// 下载
 		download() {
 			let _this = this
 			uni.getSetting({
 				success(res) {
 					// 没有权限 => 获取权限
 					if (!res.authSetting['scope.writePhotosAlbum']) {
 						uni.authorize({
 							scope: 'scope.writePhotosAlbum',
 							success() {
 								_this.createPicture()
 							},
 							fail() {
 								uni.showModal({ title: '提示：', content: "授权失败，请前往设置中心设置权限", confirmText: '前往授权',
 									success(res) {
 										if (res.confirm) {
 											uni.openSetting()
 										}
 										else {
 											uni.showToast({ title: '保存失败，没有权限!', icon: 'none' })
 										}
 									}
 								})
 							}
 						})
 					}
 					else {
 						_this.createPicture()
 					}
 				}
 			}) 	
 		},
 		
 		// 生成分享海报
 		createPicture() {
 			let _this = this
 			uni.showLoading({ title: '海报绘制中...', mask: true })
 			_this.drawCanvas(() => {
 				if (!_this.systemInfo) _this.systemInfo = uni.getSystemInfoSync()
 				let pixelRatio = _this.systemInfo ? _this.systemInfo.pixelRatio : 2
 				// 生成图片
 				uni.canvasToTempFilePath({
 					canvasId: 'myPoster',
 					width: _this.canvasWidth,
 					height: _this.canvasHeight,
 					destWidth:  _this.canvasWidth * pixelRatio,
 					destHeight:  _this.canvasHeight * pixelRatio,
 					success(res) {
 						let tempFilePath = res.tempFilePath
 						// 保存图片到相册
 						uni.saveImageToPhotosAlbum({
 							filePath: tempFilePath,
 							success() {
 								uni.hideLoading()
 								uni.showToast({ title: '海报生成成功，图片已放入您的相册', icon: 'none' })
 							}
 						})
 					}
 				})
 			})
 		},
 		//获取图片
 		getImageInfo(imgSrc){
 			return new Promise((resolve, reject) => {
 				uni.getImageInfo({
 					src: imgSrc,
 					success: (image) => {
 						resolve(image);
 						console.log('获取图片成功',image)
 					},
 					fail: (err) => {
 						reject(err);
 						console.log('获取图片失败',err)
 					}
 				});
 			});
 		},
 		
 		// 绘制canvas
 		async drawCanvas(callback) {
 			let that = this
 			let ctx = that.canvasCtx ? that.canvasCtx : uni.createCanvasContext('myPoster')
 			if (!that.canvasCtx) that.canvasCtx = ctx
 			
 
 			let ctxWidth = that.canvasWidth 
 			let ctxHeight = that.canvasHeight 
 		
 			// 清空canvas内容=====
 			ctx.clearRect(0, 0, ctxWidth, ctxHeight)
 		
 			// 绘制最外层盒子=====
 			let boxW = ctxWidth
 			let boxH = ctxHeight
 			let boxRadius = 16
 			let boxBack = "#fff"
 			let boxX = 0
 			let boxY = 0
 			let boxLeft = 0
 			let boxTop = 0
 			ctx.save()
 			ctx.rect(boxX, boxY, boxW, boxH)
 			ctx.setFillStyle(boxBack)
 			ctx.fill()
 			ctx.restore()
 			ctx.draw(true)
 			
 			// 绘制大图=====
 			let b_imageMl = 28
 			let b_imageMt = 28
 			let b_imageX = boxLeft + b_imageMl
 			let b_imageY = boxTop + b_imageMt
 			let b_imageW = 584
 			let b_imageH = 484
 			let b_imageRadius = 16
 			let b_imageBg = "#f0f0f0"
 			let b_imageSrc = await that.getImageInfo(that.datas.back_img ||'https://cos.ryz1620.com/liankun/static/IMG279.png')
 			ctx.save()
 			that.roundRect(ctx, b_imageX, b_imageY, b_imageW, b_imageH, b_imageRadius)
 			ctx.clip()
 			ctx.drawImage(b_imageSrc.path, b_imageX, b_imageY, b_imageW, b_imageH)
 			ctx.restore()
 			ctx.draw(true)
 			// 重新计算盒子top信息
 			boxTop = b_imageY + b_imageH  
 			
 			// 用户信息=====
 			// 绘制用户头像容器
 			let b_headMl = 28
 			let b_headMt = -40
 			let b_headW = 80
 			let b_headH = 80
 			let b_headX = boxLeft + b_headMl
 			let b_headY = boxTop + b_headMt
 			let b_headRadius = 40
 			let b_headBg = "#fff"
 			let b_headIsPosition = true
 			ctx.save()
 			ctx.arc(b_headX + b_headRadius, b_headY + b_headRadius, b_headRadius, 0, 2 * Math.PI)
 			ctx.setFillStyle(b_headBg)
 			ctx.fill()
 			ctx.restore()
 			ctx.draw(true)
 			// 绘制用户头像
 			let b_headimgMl = 32
 			let b_headimgMt = -36
 			let b_headimgW = 72
 			let b_headimgH = 72
 			let b_headimgX = boxLeft + b_headimgMl
 			let b_headimgY = boxTop + b_headimgMt
 			let b_headimgRadius = 36
 			let b_headimgBg = "#f0f0f0"
 			let b_headimgSrc = await that.getImageInfo(that.datas.store_logo||'https://cos.ryz1620.com/liankun/static/IMG280.png') 
 			let b_headimgIsPosition = true
 			ctx.save()
 			ctx.arc(b_headimgX + b_headimgRadius, b_headimgY + b_headimgRadius, b_headimgRadius, 0, 2 * Math.PI)
 			ctx.setFillStyle(b_headimgBg)
 			ctx.fill()
 			ctx.clip()
 			ctx.drawImage(b_headimgSrc.path, b_headimgX, b_headimgY, b_headimgW, b_headimgH)
 			ctx.restore()
 			ctx.draw(true)
 			// 绘制用户名
 			let b_nameText = that.datas.store_name||'***'
 			let b_nameFontSize = 24
 			let b_nameFont = 'bold ' + b_nameFontSize + 'px sans-serif'
 			let b_nameMt = 6
 			let b_nameMl = 124
 			let b_nameLh = 34
 			let b_nameX = boxLeft + b_nameMl
 			let b_nameY = boxTop + b_nameMt
 			ctx.save()
 			ctx.font = b_nameFont
 			ctx.setFillStyle("#333")
 			ctx.setFontSize(b_nameFontSize)
 			ctx.setTextBaseline('top')
 			ctx.fillText(b_nameText, b_nameX, b_nameY + ((b_nameLh - b_nameFontSize) / 2))
 			ctx.restore()
 			ctx.draw(true)
 			// 重新计算盒子top信息
 			boxTop = b_nameY + b_nameLh 
 			
 			// 标签=====
 			let b_tagText = that.cate
 			let b_tagFontSize = 24
 			let b_tagTextAllowW = 512    // 文字允许的长度
 			let b_tagW = 64  // 左边距48px，右边距16px
 			let b_tagH = 44
 			let b_tagLh = 44
 			let b_tagRadius = 22
 			let b_tagPl = 48
 			let b_tagMt = 28
 			let b_tagMl = 28
 			let b_tagX = boxLeft + b_tagMl
 			let b_tagY = boxTop + b_tagMt
 			let b_tagBg = "#f9f6f3"
 			let b_tagIconX = 4
 			let b_tagIconY = 4
 			let b_tagIconW = 36
 			let b_tagIconH = 36
 			let b_tagIconIsPosition = true
 			// 获取文字宽度
 			ctx.save()
 			ctx.setFontSize(b_tagFontSize)
 			let b_tagTextW = ctx.measureText(b_tagText).width
 			if (b_tagTextW > b_tagTextAllowW) {
 				b_tagW += b_tagTextAllowW
 				b_tagTextW = b_tagTextAllowW
 			}
 			else {
 				b_tagW += b_tagTextW
 			}
 			ctx.restore()
 			// 绘制标签背景
 			ctx.save()
 			that.roundRect(ctx, b_tagX, b_tagY, b_tagW, b_tagH, b_tagRadius)
 			ctx.setFillStyle(b_tagBg)
 			ctx.fill()
 			ctx.restore()
 			ctx.draw(true)
 			// 绘制文字
 			ctx.save()
 			ctx.setFillStyle("#a58f6d")
 			ctx.setTextBaseline('top')
 			that.dealWords({ 
 				ctx,
 				fontSize: b_tagFontSize,
 				word: b_tagText,
 				maxWidth: b_tagTextW,
 				x: b_tagX + b_tagPl,
 				y: b_tagY + ((b_tagLh - b_tagFontSize) / 2),
 			})
 			ctx.restore()
 			ctx.draw(true)
 			// 绘制icon
 			let titimg = await that.getImageInfo(that.titimg)
 			ctx.save()
 			ctx.drawImage(titimg.path, b_tagX + b_tagIconX, b_tagY + b_tagIconY, b_tagIconW, b_tagIconH)
 			ctx.restore()
 			ctx.draw(true)
 			// 重新计算盒子top信息
 			boxTop = b_tagY + b_tagH 
 			
 			
 			// 内容=====
 			let b_contText = that.datas.store_detail
 			let b_contFontSize = 24
 			let b_contMt = 16
 			let b_contMl = 32
 			let b_contWidth = 576
 			let b_contLh = 32
 			let b_contX = boxLeft + b_contMl
 			let b_contY = boxTop + b_contMt
 			ctx.save()
 			ctx.setFillStyle("#6c6c6c")
 			ctx.setTextBaseline('top')
 			that.dealWords({
 				ctx,
 				fontSize: b_contFontSize,
 				word: b_contText,
 				maxWidth: b_contWidth,
 				x: b_contX,
 				y: b_contY + ((b_contLh - b_contFontSize) / 2),
 			})
 			ctx.restore()
 			ctx.draw(true)
 			// 重新计算盒子top信息
 			boxTop = b_contY + b_contLh 
 			
 			// 分割线=====
 			let b_lineMt = 40
 			let b_lineX = boxLeft
 			let b_lineY = boxTop + b_lineMt
 			let b_lineBg = "#f4f4f4"
 			ctx.save()
 			ctx.rect(b_lineX, b_lineY, boxW, 1)
 			ctx.setFillStyle(b_lineBg)
 			ctx.fill()
 			ctx.restore()
 			ctx.draw(true)
 			// 重新计算盒子top信息
 			boxTop = b_lineY 
 			
 			// logo=====
 			let b_logoText = "融易装"
 			let b_logoMt = 60
 			let b_logoMl = 32
 			let b_logoLh = 56
 			let b_logoFontSize = 40
 			let b_logoFont = 'bold ' + b_logoFontSize + 'px sans-serif'
 			let b_logoX = boxLeft + b_logoMl
 			let b_logoY = boxTop + b_logoMt
 			let b_logoIsPosition = true
 			ctx.save()
 			ctx.font = b_logoFont
 			ctx.setFontSize(b_logoFontSize)
 			ctx.setFillStyle("#333")
 			ctx.setTextBaseline('top')
 			ctx.fillText(b_logoText, b_logoX, b_logoY + ((b_logoLh - b_logoFontSize) / 2))
 			ctx.restore()
 			ctx.draw(true)
 			
 			// 提示=====
 			let b_tipText1 = "长按小程序码"
 			let b_tipText2 = "查看Ta的分享"
 			let b_tipMt = 54
 			let b_tipMl = 320
 			let b_tipLh = 36
 			let b_tipFontSize = 24
 			let b_tipX = boxLeft + b_tipMl
 			let b_tipY = boxTop + b_tipMt
 			let b_tipIsPosition = true
 			ctx.save()
 			ctx.setFontSize(b_tipFontSize)
 			ctx.setFillStyle("#939393")
 			ctx.setTextBaseline('top')
 			ctx.fillText(b_tipText1, b_tipX, b_tipY + ((b_tipLh - b_tipFontSize) / 2))
 			ctx.fillText(b_tipText2, b_tipX, b_tipY + b_tipLh + ((b_tipLh - b_tipFontSize) / 2))
 			ctx.restore()
 			ctx.draw(true)
 			
 			// 小程序码=====
 			let b_codeMl = 492
 			let b_codeMt = 28
 			let b_codeX = boxLeft + b_codeMl
 			let b_codeY = boxTop + b_codeMt
 			let b_codeW = 120
 			let b_codeH = 120
 			let b_codeBg = "#f0f0f0"
 			let b_codeSrc = await that.getImageInfo(that.datas.code) 
 			ctx.save()
 			ctx.rect(b_codeX, b_codeY, b_codeW, b_codeH)
 			ctx.clip()
 			ctx.drawImage(b_codeSrc.path, b_codeX, b_codeY, b_codeW, b_codeH)
 			ctx.restore()
 			ctx.draw(true, () => {
 				if (typeof callback === 'function') {
 					setTimeout(() => {
 						callback()
 					}, 100)
 				}
 			})
 		},
 		
 		// 圆角矩形
 		roundRect(ctx, x, y, w, h, r) {
 			let min_size = Math.min(w, h)
 			if (r > min_size / 2) r = min_size / 2
 			ctx.beginPath()
 			ctx.moveTo(x + r, y)
 			ctx.arcTo(x + w, y, x + w, y + h, r)
 			ctx.arcTo(x + w, y + h, x, y + h, r)
 			ctx.arcTo(x, y + h, x, y, r)
 			ctx.arcTo(x, y, x + w, y, r)
 			ctx.closePath()
 		},
 			
 		//处理文字多出省略号显示
 		dealWords({ ctx, fontSize, line, word, maxWidth, x, y, maxLine = 1 } = {}) {
 			line = line ? line : fontSize
 			ctx.setFontSize(fontSize)  // 设置字体大小
 			let allRow = Math.ceil(ctx.measureText(word).width / maxWidth)  // 实际总共能分多少行
 			let count = allRow >= maxLine ? maxLine : allRow  // 实际能分多少行与设置的最大显示行数比，谁小就用谁做循环次数
 			let endPos = 0  // 当前字符串的截断点
 			for (let j = 0; j < count; j++) {
 				let nowStr = word.slice(endPos)  // 当前剩余的字符串
 				let rowWid = 0  // 每一行当前宽度    
 				if (ctx.measureText(nowStr).width > maxWidth) {  // 如果当前的字符串宽度大于最大宽度，然后开始截取
 					for (let m = 0; m < nowStr.length; m++) {
 						rowWid += ctx.measureText(nowStr[m]).width  // 当前字符串总宽度
 						if (rowWid > maxWidth) {                 
 							if (j === maxLine - 1) {  // 如果是最后一行
 								ctx.fillText(nowStr.slice(0, m - 1) + '...', x, y + j * line)   // (j+1)*18这是每一行的高度        
 							} else {
 								ctx.fillText(nowStr.slice(0, m), x, y + j * line)
 							}
 							endPos += m  // 下次截断点
 							break
 						}
 					}
 				} else { // 如果当前的字符串宽度小于最大宽度就直接输出
 					ctx.fillText(nowStr.slice(0), x, y + j * 18);
 				}
 			}
 		},
 		
 	}
 } 
 </script>
 
 <style lang="scss" scoped>
 // 背景=====
 .share .s_bg {width: 100vw;height: 100vh;background: linear-gradient(180deg, #1A212D 0%, #A2A5AA 100%);position: fixed;top: 0;left: 0;z-index: 1;}
 
 // 内容=====
 .share .s_content {padding-top: 72rpx;position: relative;z-index: 2;
 	.s_cPicture {width: 640rpx;margin-left: 56rpx;border-radius: 16rpx;background: #fff;box-shadow: 0 0 12rpx rgba(0, 0, 0, .16);overflow: hidden;}
 	.s_cImage {width: 584rpx;height: 484rpx;margin: 28rpx 0 0 28rpx;border-radius: 16rpx;background: #f0f0f0;}
 	.s_cUser {height: 34rpx;line-height: 34rpx;font-size: 24rpx;font-weight: bold;padding-left: 124rpx;margin-top: 6rpx;position: relative;}
 	.s_cHead {width: 80rpx;height: 80rpx;border: 4rpx solid #fff;border-radius: 50%;background: #f0f0f0;position: absolute;bottom: 0;left: 28rpx;overflow: hidden;}
 	// 标签
 	.s_cTags {padding: 20rpx 28rpx 0;overflow: hidden;}
 	.s_ctTag {height: 44px;height: 44rpx;line-height: 44rpx;color: #a58f6d;font-size: 24rpx;padding-left: 48rpx;margin: 8rpx 8rpx 0 0;border-radius: 22rpx;background: #f9f6f3;position: relative;float: left;}
 	.s_ctIcon {width: 36rpx;height: 36rpx;position: absolute;top: 4rpx;left: 4rpx;}
 	// 清单
 	.s_cChecklist {height: 96rpx;padding-top: 16rpx;margin: 16rpx 28rpx 0;border-radius: 8rpx;background: #f6f7fb;box-sizing: border-box;display: flex;}
 	.s_ccItem {flex: 1;}
 	.s_ccTit, .s_ccTxt {height: 28rpx;line-height: 28rpx;text-align: center;color: #939393;font-size: 20rpx;}
 	.s_ccTxt {color: #333;margin-top: 8rpx;}
 	// 设计动态
 	.s_cText1 {height: 32rpx;line-height: 32rpx;color: #6c6c6c;font-size: 24rpx;margin: 16rpx 32rpx 0;}
 	// 案例详情
 	.s_cText2 {height: 32rpx;line-height: 32rpx;color: #6c6c6c;font-size: 24rpx;margin: 28rpx 32rpx 0;}
 	.s_cBtm {height: 176rpx;margin-top: 40rpx;position: relative;
 		&::before {content: "";width: 100%;height: 1px;background: #f4f4f4;position: absolute;top: 0;left: 0;transform: scaleY(.5);}
 	}
 	.s_cCode {width: 120rpx;height: 120rpx;margin: 28rpx 28rpx 0 0;float: right;}
 	.s_cTip {line-height: 36rpx;color: #939393;font-size: 24rpx;margin: 54rpx 20rpx 0 0;float: right;}
 	.s_cLogo {height: 176rpx;line-height: 176rpx;font-size: 40rpx;font-weight: bold;padding-left: 32rpx;}
 	.s_cFuns {padding: 60rpx 120rpx 30rpx;overflow: hidden;}
 	.s_cfClose,
 	.s_cfSave {padding: 20rpx;position: relative;float: left;
 		&:active {opacity: .88;}
 		.s_cfBtn {width: 112rpx;height: 112rpx;color: #ccc;border-radius: 50%;background: #fff;box-shadow: 0 0 12rpx rgba(0, 0, 0, .16);display: flex;justify-content: center;align-items: center;}
 		.s_cfIcon {font-size: 72rpx;}
 		.s_cfTxt {height: 34rpx;line-height: 34rpx;text-align: center;color: #fff;font-size: 24rpx;margin-top: 16rpx;}
 	}
 	.s_cfSave {float: right;
 		.s_cfBtn {background: #ffd425;color: #fff;}
 	}
 }
 
 // canvas
 .share .s_canvas {position: relative;overflow: hidden;
 	.s_cCan {position: absolute;top: 10000px;left: 10000px;}
 }
 
 </style>
 